<script setup lang="ts">
import TitleBarBtnGroup from "./TitleBarBtnGroup.vue";
import WindowContainer from "./WindowContainer.vue";
import {useRootStore} from "../stores/root.ts";
import {onMounted, ref, watch} from "vue";
import {storeToRefs} from "pinia";
import {appWindow} from "@tauri-apps/api/window";
import {emit, listen} from "@tauri-apps/api/event";
import {exit} from "@tauri-apps/api/process";
import { confirm } from '@tauri-apps/api/dialog';
import { useRouter } from "vue-router";


const router = useRouter();
const userId = ref('')
const password = ref('')
const isLogin = ref(false)
const snackVisible = ref(false)
const snackMsg = ref('')

onMounted(()=>{
  setTimeout(()=>{
    userId.value = window.localStorage.getItem("username") || ""
    password.value = window.localStorage.getItem("password") || ""


    if(userId.value && password.value){
        emit('login',{userId:userId.value,password:password.value})
    }
  },1000)
})

listen('LoginSuccess',(event)=>{
  isLogin.value=true

  appWindow.close()
})

listen('passwordError',()=>{
  showSnackBar('用户名或密码错误')
})

const submit = () => {
  emit('login',{userId:userId.value,password:password.value})
  localStorage.setItem("username",userId.value)
  localStorage.setItem("password",password.value)

};

const showSnackBar=(msg:string)=>{
  snackMsg.value=msg;
  snackVisible.value=true
}

const goToRegister = () => {
  router.push('/register');
}



</script>

<template>
  <window-container>
    <div class="login-window">
      <v-snackbar v-model="snackVisible">
        {{ snackMsg }}
      </v-snackbar>
    <div class="title-bar" data-tauri-drag-region>
      <div class="title" data-tauri-drag-region>登录</div>
      <TitleBarBtnGroup :exit-on-close="true" ></TitleBarBtnGroup>
    </div>
    <v-card title="WeCheat" style="margin-bottom: 50px" text="welcome to use wecheat" color="green"></v-card>
    <div class="login-form">
      <!--  todo 组件用错了，应该用form表单组件     -->
      <v-text-field v-model="userId" variant="solo-filled" placeholder="请输入用户名" label="用户名" clearable></v-text-field>
      <v-text-field v-model="password" variant="solo-filled" placeholder="请输入密码" label="密码" type="password" clearable></v-text-field>
      <v-btn width="400" color="green" height="40" @click="submit">登录</v-btn>
      <div class="register-link">
        <span>还没有账号？</span>
        <v-btn variant="text" color="primary" @click="goToRegister">立即注册</v-btn>
      </div>
      <v-container>
        <v-checkbox label="I agree to the wecheat terms of use"></v-checkbox>
      </v-container>
    </div>

  </div>
  </window-container>
</template>

<style scoped lang="scss">
.login-window{
  background: white;
  height: 100%;
  .title-bar{
    background: #eee;
    display: flex;
    align-items: center;
    .title{
      flex: 1;
      text-align: center;
      padding-left: 10px;
    }
  }

  .login-form{
    text-align: center;
    width: 400px;
    margin: 50px auto 0;
    
    .register-link {
      margin: 20px 0;
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 5px;
    }
  }
}
</style>